<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./fonts//demo.css"> -->
  <link rel="stylesheet" href="/admin/fonts/iconfont.css">
  <link rel="stylesheet" href="/admin/lib/layui/css/layui.css" />
  <style>
    .space_slide {
      margin: 10px 20px 30px 20px;
    }
    .layui-input{
      display: inline;
    }
  </style>
</head>

<body>

  <div class="layui-card space_slide">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href="https://5aebf8b605931.t73.qifeiye.com/">首页</a>
        <a href="">网站管理</a>
        <a><cite>添加核心团队</cite></a>
      </span>
    </div>
    <div class="layui-card-body">
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <label class="layui-form-label">团队名称</label>
          <div class="layui-input-block">
            <input type="text" name="tname" style="width: 60%" required lay-verify="required" placeholder="请输入团队名" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">团队介绍</label>
          <div class="layui-input-block">
            <input type="text" name="tintro" style="width: 60%" required lay-verify="required" placeholder="介绍你们团队" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">团队图片</label>
          <div class="layui-input-inline">
            <button type="button" class="layui-btn" id="test1">
              <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <div class="layui-input-block" style="width: 55%">
            <blockquote class="layui-elem-quote layui-quote-nm">
              预览图
              <div>
                <img src="" class="thumb" width="400" alt="">
                <input type="hidden" name="timg" class="gthumb">
              </div>
            </blockquote>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">成就</label>
          <div class="layui-input-block">
            <input type="text" name="tachievement" style="width: 52.5%;" placeholder="请输入成就并点击添加" autocomplete="off" class="layui-input">
            <span type="button" class="layui-btn layui-btn-normal" name="add" style=" margin-right: 20px;"><i class="layui-icon layui-icon-addition"></i>添加</span>
            <ul class="list-group" style="margin-top: 20px;">
            </ul>
          </div>
        </div>
        <input type="hidden" name="tachievementall">
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="teamsform">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>

</html>
<script src="/admin/lib/layui/layui.js"></script>
<script>
  var text = document.getElementsByName('tachievement')[0];
  var btn = document.getElementsByName('add')[0];
  var ul = document.querySelector("ul");

  btn.onclick=function(){
    if (text.value == ""){
      alert("成就内容为空，不能添加新部分");
    } else {
      var str = `<li class="list-group-item">
                <input type="text" name="tachievementlist" style="width: 52.5%;border-style:none" value="${text.value}" required lay-verify="required" placeholder="请输入成就" autocomplete="off" class="layui-input">
                <span type="button" class="layui-btn layui-btn-danger" name="sub" style=" margin-right: 20px;"><i class="layui-icon layui-icon-subtraction"></i>删除</span>
              </li>`;
      ul.innerHTML = str + ul.innerHTML;
      text.value = "";

      var deletea = document.getElementsByName("sub");
      deletea.forEach(function(item, index){
        item.onclick = function(){
          // console.log(this.parentNode);
          ul.removeChild(this.parentNode);
        }
      })

      var tacall = document.getElementsByName('tachievementall')[0];
      tacall.value = "";
      var taclist = document.getElementsByName('tachievementlist');
      taclist.forEach(function(item, index){
        tacall.value += item.value + ";";
      })
    }

    var deletea = document.querySelectorAll("a");
    deletea.forEach(function(item, index){
      item.onclick = function(){
        // console.log(this.parentNode);
        ul.removeChild(this.parentNode);
      }
    })
  }
</script>
<script>
  layui.use(['element','upload','layer','form','jquery'],function() {
    var {element, upload, layer, form, $} = layui;

    // 图片上传
    var thumb = document.querySelector(".thumb");
    var gthumb = document.querySelector(".gthumb");
    upload.render({
      elem:"#test1",
      url:"/admin/web/upload",
      done:(res)=>{
        // console.log(res);
        if (res.code == 1){
          // console.log(res.url);

          thumb.src = res.url;
          gthumb.value = res.url;
        } else {
          layer.msg("图片上传失败");
        }
      }
    })

    // 数据上传
    form.on("submit(teamsform)",(data)=>{
      $.ajax({
        type:"POST",
        url:"/admin/web/teams_add",
        data:data.field,
        dataType:"json",
        success:(res)=>{
          var {code,msg}=res;
          if (code == 1){
            layer.open({
              title:"添加核心团队信息提示",
              content:res.msg,
              icon:1,
              time:2000
            })
          }else{
            layer.open({
              title:"添加核心团队信息提示",
              content:res.msg,
              icon:2,
              time:2000
            })
          }
        }
      })
      return false;
    })
  })
  
</script>